<template>
	<view class="content">
	  <view class="tabBar">
	  	 <view class="tabBarItem" v-for="(item, i) in tabs" :key='i' 
		    @click="params.orderStatus = item.value;getOrderList()"
		    :class="params.orderStatus===item.value?'active':''">
	  	 	{{item.label}}
	  	 </view>
	  </view>
	  <view class="orderlist">
	  	<scroll-view  
		    v-if='list.length > 0'
		    class="scroll-Y" 
		    scroll-y="true"
			refresher-enabled='true'
			:refresher-triggered='refreshe'
			@refresherrefresh='update'
			lower-threshold='0'
			@scrolltolower="lower">
			<view  class="scroll-view-item" v-for='(item, i) in list' :key='i' @click="goDetail(i)">
				<view class="order-title flexBC">
					<view class="title">
						订单号：{{item.sn}}
					</view>
					<view class="type1 type">
						已完成
					</view>
				</view>
				<view class="order-info">
				  <view class="infoItem">
					  <text class="title">服务项目:</text>
					  <text class="info">{{item.washMenuName}}</text>
				  </view>
				  <view class="infoItem">
					  <text class="title">车俩信息:</text>
					  <text class="info">{{item.licensePlate}} &nbsp;| &nbsp;{{item.color}} |&nbsp;{{item.cartType}}</text>
				  </view>
				  <view class="infoItem">
					  <text class="title">服务时间:</text>
					  <text class="info">{{item.appointmentTime}}</text>
				  </view>
				  <view class="infoItem">
					  <text class="title">服务地址:</text>
					  <view class="value address">
						  <text>{{item.serviceAddress}}</text>
						  <image :src="$getImageSrc('home_ic_dw.png')" mode="widthFix"></image>
					  </view>
				  </view>
				</view>
			</view>
		</scroll-view>
        <no-list tipInfo="你还没有该类型的订单" v-else></no-list>
	  </view>
	  <uni-popup ref="orderPopup" :mask-click="false">
	  	 <view class="popup-content">
	  		<view class="popup-title">温馨提示</view>
	  		<view class="popup-tip-info">
	  			订单提交已超过2分钟，取消预约将扣除返空费（订单总金额的1%）
	  		</view>
	  		<view class="popup-btns">
	  			<button class="btn " type="default" @click="close">确认取消</button>
	  			<button class="btn btn1" type="primary">再想想</button>
	  			
	  		</view>
	  	 </view>
	  </uni-popup>
	</view>
</template>

<script>
	import{historylist} from '@/untils/api'
	export default {
		data() {
			return {
				tabs:[{label:'全部', value:''}, {label:'已完成',value:'FINISH'}, {label:'已取消',value:'CANCEL'}],
				list:[],
				params:{
					pageNum:1,
					pageSize:20,
					orderStatus:''
				},
				total:0,
				refreshe:false
			}
		},
		onShow() {
         this.getOrderList()
		},
		methods: {
          lower(e){
			  if(this.list.length >= this.total){
				  console.log('已请求完所有数据…')
				  return false;
			   }
			   this.params.pageNum += 1
			   this.getOrderList()
		  },
		  update(){
			 this.refreshe = true
			 setTimeout(() => {
			  this.params.pageNum = 1
			  this.refreshe = false
			  this.getOrderList()
			 },500) 
		  },
		  goDetail(i){
			uni.navigateTo({
				url:'/pages/awaitOrder/orderInfo?sn='+this.list[i].sn
			})
		  },
		  getOrderList(){
			  historylist(this.params).then((res) => {
				  if(this.params.pageNum - 1 === 0){
					this.list = res.data.records
				  }else{
					this.list.push(...res.data?.records)
				  }
				  this.total = res.data.total
			  })
		  }
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		position: relative;
		overflow: hidden;
		height: 100%;
		background: #eee;
		.orderlist{
			height: calc(100% - 120rpx);
			overflow: hidden;
			width: 100%;
			.scroll-Y{
			  width: 700rpx;
			  margin:  0 auto;
			  height: calc(100% - 20rpx);
			  overflow-y: auto;
			  .scroll-view-item{
				  margin-top: 40rpx;
				  background: #fff;
				  border-radius: 20rpx;
				  // height: 312rpx;
				  font-size: 28rpx;
				  .order-title{
					  color: #2A2B2B;
					  width: 90%;
					  margin: 0 auto;
					  line-height: 80rpx;
					  border-bottom: 1px solid #f9f9f9;
					  .type{
						  color: #F96501;
					  }
					  .type1{
						  color: #AEB3B3;
					  }
					  
				  }
				  .order-info{
					  width: 90%;
					  margin: 0 auto;
					  color: #AEB3B3;
					  padding: 20rpx 0;
					  .infoItem{
						  line-height: 60rpx;
						  display: flex;
						  justify-content: space-between;
						  align-items: center;
						  .title{
							width: 160rpx;
						  }
						  .info{
							  text-align: right;
							  width: calc(100% - 160rpx);
						  }
						  .address{
							  width: calc(100% - 160rpx);
						  }
						  .value{
							  display: flex;
							  justify-content: flex-end;
							  align-items: center;
							  image{
								  width: 60rpx;
								  margin-left: 8rpx;
							  }
						  }
					  }
				  }
				  .order-cancel{
					  border-top: 1px solid #f9f9f9;
					  overflow: hidden;
					  .btn{
						  background: #FF3E3E;
						  width: 200rpx;
						  height: 80rpx;
						  line-height: 80rpx;
						  border-radius: 100rpx;
						  color: #fff;
						  font-size: 30rpx;
						  float: right;
						  margin: 20rpx 0;
						  margin-right: 40rpx;
					  }
				  }
			  }
			  .scroll-view-item:nth-last-child(1){
				  margin-bottom: 20rpx;
			  }
			}
		}
		.popup-content{
			width: 550rpx;
			height: 300rpx;
			padding: 40rpx;
			background:#fff;
			border-radius: 10rpx;
			font-size: 24rpx;
			text-align: center;
			padding-top: 80rpx;
			background: #fff linear-gradient( 180deg, rgba(2,177,170,0.12) 0%, rgba(0,214,142,0) 20%);
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			.popup-title{
				font-size: 32rpx;
				font-weight: 600;
				line-height: 40rpx;
			}
			.popup-tip-info{
				line-height: 180rpx;
			}
			.popup-btns{
				width: 500rpx;
				margin: 0 auto;
				display: flex;
				.btn{
					height: 80rpx;
					line-height: 80rpx;
					font-size: 26rpx;
					margin-bottom: 30rpx;
					width: 200rpx;
				}
				.btn1{
					background: #02B1AA;
				}
			}
		 }
	}
		.tabBar{
			width: 100%;
			overflow: hidden;
			background-color: #fff;
			display: flex;
			justify-content: space-around;
			align-items: center;
			text-align: center;
			height: 120rpx;
			line-height: 120rpx;
			.tabBarItem{
				width: auto;
				// padding: 0 40rpx;
				font-size: 30rpx;
				color: #242941;
			}
			.tabBarItem.active{
			  border-bottom: 10rpx solid #02B1AA;
			  box-sizing: border-box;
			  line-height: 110rpx;
			  font-size: 36rpx;
			  font-weight: 800;
			}
		}
</style>
